import 'dart:io';

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import '../../../app_files.dart';
import 'action.dart';
import 'state.dart';

const double kOrderImageWidth = 90;

Widget buildView(PatrolReasonViewState state, Dispatch dispatch, ViewService viewService) {
  Widget _infoWidget() => Container(
    padding: EdgeInsets.only(left: 15, right: 15, bottom: 8,top: 12),
    decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
            bottom: BorderSide(color: ThemeConfig.separeColor, width: 10))),
    child: Column(
      children: [
        Row(
          children: [
            Text(
              '巡检工单编号：',
              style: TextThemeConfig.Font14WithColor22,
            ),
            Text(
              state.info.orderID,
              style: TextThemeConfig.Font14WithColor22,
            ),
          ],
        ),
        Padding(
          padding: EdgeInsets.only(top: 8),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '巡检地址：',
                style: TextThemeConfig.Font14WithColor99,
              ),
              Expanded(
                child: Text(
                  state.info.pointAddress,
                  style:  TextThemeConfig.Font14WithMainColor,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        ),
        Padding(
          padding: EdgeInsets.only(top: 8),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '管点编号：',
                style: TextThemeConfig.Font14WithColor99,
              ),
              Text(
                state.info.pointID,
                style: TextThemeConfig.Font14WithColor22,
              ),
            ],
          ),
        ),

        Padding(
          padding: EdgeInsets.only(top: 8),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '管点名称：',
                style: TextThemeConfig.Font14WithColor99,
              ),
              Text(
                state.info.pointName,
                style: TextThemeConfig.Font14WithColor22,
              ),
            ],
          ),
        ),
      ],
    ),
  );

  Widget _reasonWidget() => Container(
    color: Colors.white,
    padding: EdgeInsets.only(bottom: 15),
    child: Column(
      children: [
        Container(
          height: 100,
          child: Container(
            padding: EdgeInsets.only(left: 15, right: 15, bottom: 8),
            height: 100,
            child: TextField(
              minLines: 1,
              maxLines: 10,
              controller: state.textEditingController,
              style: TextThemeConfig.Font13WithColor22,
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: "请在此处描述问题...",
                hintStyle: TextThemeConfig.Font13WithColor99,
                contentPadding: EdgeInsets.only(),
              ),
              onChanged: (String str) {
                if (str.length > ThemeConfig.descTextLength)
                  state.textEditingController.text =
                      str.substring(0, ThemeConfig.descTextLength);
              },
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.only(left: 15),
          height: kOrderImageWidth,
          child: ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              if (index == state.orderPhoto.length) {
                return InkWell(
                  child: Container(
                    margin: EdgeInsets.only(right: 12),
                    width: kOrderImageWidth,
                    height: kOrderImageWidth,
                    color: Color(0xffF5F5F5),
                    child: Align(
                      child: Image.asset('images/icon_camera.png'),
                    ),
                  ),
                  onTap: () =>
                      dispatch(PatrolReasonViewActionCreator.onTapAddPic()),
                );
              } else {
                var file = state.orderPhoto[index];
                return InkWell(
                  child: Container(
                    margin: EdgeInsets.only(right: 12),
                    child: file is File
                        ? Image(
                      image: FileImageEx(file),
                      width: kOrderImageWidth,
                      height: kOrderImageWidth,
                      fit: BoxFit.fill,
                    )
                        : CustomImage(
                      file,
                      fit: BoxFit.fill,
                      width: kOrderImageWidth,
                      height: kOrderImageWidth,
                    ),
                  ),
                  onTap: () =>
                      dispatch(PatrolReasonViewActionCreator.onTapPic(file)),
                );
              }
            },
            itemCount: state.orderPhoto.length + 1,
            scrollDirection: Axis.horizontal,
            itemExtent: kOrderImageWidth + 12,
            padding: EdgeInsets.only(),
          ),
        )
      ],
    ),
  );

  return Scaffold(
    appBar: myAppBar(viewService.context, title: '无法巡检'),
    body: GestureDetector(
      onTap: () => CommonUtils.closeKey(viewService.context),
      behavior: HitTestBehavior.translucent,
      child: SingleChildScrollView(
        child: Column(
          children: [
            _infoWidget(),
            _reasonWidget(),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 15, vertical: 40),
              height: 50,
              decoration: BoxDecoration(
                color: ThemeConfig.mainColor,
                borderRadius: BorderRadius.all(Radius.circular(4)),
              ),
              child: InkWell(
                child: Align(
                  child: Text(
                    '提交原因',
                    style: TextThemeConfig.Font16WithWhite,
                  ),
                ),
                onTap: () => dispatch(PatrolReasonViewActionCreator.onSubmit()),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}
